<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: blue;
        }

        .normal {
            background-color: aquamarine;
        }

        .warning {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <div id="app">
            <!--   <div v-bind:style="[basestyle,newstyle]"> -->
            <div :class="['active','normal']">数组绑定多个class</div>
            <div :class="[{active:isActive},'normal']">数组包含对象绑定class</div>
            <div :class="[showWarning(),'normal']">数组包含方法绑定class</div>
            <div :style="[warning,bold]">数组绑定多个style</div>
            <div :style="[warning,mix()]">数组包含方法绑定stlye</div>
            
        </div>  
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'helloworld',
                msg2:'HELLOWORD',
                isActive:true,
                warning:{
                    color:'orange'
                },
                bold:{
                    fontWeight:'bold',
                    backgroundColor:'grey'
                }
            },
            methods:{
                showWarning(){
                    return 'warning'
                },
                mix() {
                    return {
                        ...this.bold,
                        fontSize:100+'px'
                    }
                }
            }
        })
   
    </script>
</body>
</html>